<template>
  <div class="page cinema-detail" v-loading="loading">
    <!-- 顶部导航 -->
    <div class="topbar">
      <div class="brand" @click="goList">
        <el-icon><VideoCamera /></el-icon>
        <span>影院详细信息</span>
      </div>
      <div class="actions">
        <el-link type="primary" @click="goList">全部影院</el-link>
      </div>
    </div>

    <!-- 英雄区：影院标题与状态 -->
    <section class="hero glass">
      <h1 class="title">{{ cinema?.cname || '影院详情' }}</h1>
      <div class="meta">
-        <el-tag :type="tagType(cinema?.status)">{{ cinema?.status || 'UNKNOWN' }}</el-tag>
+        <el-tag :type="tagType(cinema?.status)">{{ statusText(cinema?.status) }}</el-tag>
        <span class="split">·</span>
        <span>{{ cinema?.address || '地址未知' }}</span>
        <span class="split">·</span>
        <span>{{ cinema?.phone || '电话未知' }}</span>
      </div>
    </section>

    <!-- 详情主体 -->
    <section class="content">
      <el-card class="glass-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <div class="info">
          <p><strong>名称：</strong>{{ cinema?.cname || '未命名影院' }}</p>
          <p><strong>地址：</strong>{{ cinema?.address || '地址未知' }}</p>
          <p><strong>电话：</strong>{{ cinema?.phone || '电话未知' }}</p>
          <p><strong>状态：</strong>{{ statusText(cinema?.status) }}</p>
          <p v-if="cinema?.createdAt"><strong>创建时间：</strong>{{ fmtDate(cinema?.createdAt) }}</p>
          <p v-if="cinema?.updatedAt"><strong>更新时间：</strong>{{ fmtDate(cinema?.updatedAt) }}</p>
        </div>
      </el-card>

      <el-card class="glass-card" v-if="cinema?.description">
        <template #header>
          <div class="card-header">
            <span>影院介绍</span>
          </div>
        </template>
        <div class="desc" v-html="cinema.description"></div>
      </el-card>

      <div class="actions-bottom">
        <el-button @click="goList">返回影院列表</el-button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { VideoCamera } from '@element-plus/icons-vue'
import { getCinema } from '@/api/cinema'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()

const cinema = ref(null)
const loading = ref(true)

const tagType = (s) => {
  if (s === 'OPEN') return 'success'
  if (s === 'CLOSED') return 'warning'
  return 'default'
}
const statusText = (s) => {
  if (s === 'OPEN') return '营业中'
  if (s === 'CLOSED') return '暂停营业'
  return '未知状态'
}

const fmtDate = (d) => {
  try { return dayjs(d).format('YYYY-MM-DD HH:mm') } catch { return d }
}

const fetchDetail = async (id) => {
  loading.value = true
  try {
    const res = await getCinema(id)
    if (res && (res.code === '200' || res.code === 200)) {
      cinema.value = res.data || null
    } else {
      ElMessage.error(res?.msg || '获取影院详情失败')
    }
  } catch (e) {
    console.error(e)
    ElMessage.error('网络异常，稍后重试')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  const id = route.params.id
  if (!id) {
    ElMessage.error('缺少影院ID')
    router.replace('/cinemas')
    return
  }
  fetchDetail(id)
})

const goList = () => router.push('/cinemas')
</script>

<style scoped>
.page { min-height: 100vh; background: radial-gradient(1000px 500px at 10% 10%, rgba(99,102,241,0.15), transparent), radial-gradient(800px 400px at 90% 0%, rgba(16,185,129,0.12), transparent), #0b1020; color: #e5e7eb; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.brand { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; letter-spacing: 0.6px; }
.actions :deep(.el-link) { margin-left: 12px; }

.hero { margin: 16px auto 24px; padding: 28px 24px; max-width: 980px; border-radius: 16px; background: rgba(255,255,255,0.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.22); }
.title { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.meta { display: flex; align-items: center; gap: 10px; color: #e5e7eb; }
.split { color: #b7c3d0; }

.content { max-width: 980px; margin: 0 auto 40px; padding: 0 12px; }
.glass-card { margin-bottom: 16px; background: rgba(255,255,255,0.12); border-radius: 14px; border: 1px solid rgba(255,255,255,0.22); box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.card-header { font-weight: 600; }
.info p { margin: 6px 0; }
.desc { color: #e5e7eb; line-height: 1.7; }
.glass-card :deep(.el-card__header) { color: #e5e7eb; }
.glass-card :deep(.el-card__body) { color: #e5e7eb; }
.info { color: #e5e7eb; }
.info strong { color: #ffffff; }

.actions-bottom { display: flex; justify-content: center; margin-top: 12px; }
</style>